<template>
  <div class="echarts-outer-wrapper flex-cloumn width-620">
    <Title title="本年税费收入(分税种)" time="2" timePosition="left" dw="单位：亿元"></Title>
    <echartCompt class="flex1" v-model="chartOption"></echartCompt>
  </div>
</template>

<script>
import * as echartOption from "@/components/echart-axis";
import Title from "@/components/title";
// import * as echarts from "echarts";

export default {
  name: "aszsfsr",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: "",
      EchartData: [],
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    // this.myChart = echarts.init(this.$refs.echart);
    this.ajax({
      url: "/dpzsSrcxService/aszsfsrQuery",
      method: "post",
      data: {
        param: {
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data.sfsrList;
      this.rightChartData();
    });
  },
  computed: {
    chartOption() {
      const category = this.EchartData.map((item) => {
        return {
          name: item.szmc,
          value: item.nljje,
        };
      }); // 类别
      const total = 360; // 数据总数
      const a = ["20%", "40%", "60%", "80%", "100%"];
      var datas = [];
      category.forEach((value) => {
        datas.push(value.value);
      });
      const ydata = category.map((v) => v.name);
      let option = {
        grid: echartOption.echartGrid({
          left: 60,
          right: 100,
          containLabel: false,
        }),
        dataZoom: echartOption.dataZoomRight([0], {
          endValue: 7,
        }),
        xAxis: {
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: echartOption.xAxisTick,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            data: ydata,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                verticalAlign: "bottom",
                color: "#FFFFFF",
                fontSize: 14,
                fontFamily: "Microsoft YaHei",
                align: "left",
                padding: [0, 0, 9, 10],
              },
              formatter: (name, index) => {
                return `${name}`;
              },
            },
            offset: 0,
          },
        ],
        series: [
          {
            // 内
            type: "bar",
            barWidth: 14,
            barCateGoryGap: 20,
            legendHoverLink: false,
            silent: true,
            cursor: "default",
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: function (params) {
                  return echartOption.ColorOne(params);
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{c}",
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
            data: category,
            z: 2,
            animationEasing: "elasticOut",
          },
        ],
      };
      return option;
    },
  },
  methods: {
    rightChartData() {
      // this.myChart.setOption(option);
    },
  },
};
</script>
<style scoped lang="scss">
.echarts-outer-wrapper {
  width: 616px;
  height: 476px;
}
</style>
